<template>
  <i class="svg-icon-wrapper" :style="{ fontSize: size, width: size, height: size }">
    <svg
      v-if="type === 'string'"
      class="svg-icon"
      viewBox="0 0 1706 1024"
      aria-hidden="true"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path
        d="M278.016 975.189333c215.722667 0 331.605333-84.48 331.605333-268.629333 0-185.514667-75.434667-241.493333-284.501333-290.474667C156.672 376.490667 133.632 345.088 133.632 256.341333c0-122.709333 62.122667-148.48 192.853333-148.48 84.992 0 179.370667 17.578667 233.301334 38.058667V34.133333C515.584 16.384 415.573333 0 325.12 0 113.493333 0 13.824 84.650667 13.824 256.341333c0 167.936 69.973333 215.552 261.632 261.973334 175.274667 42.325333 215.722667 73.728 215.722667 189.44 0 117.418667-72.874667 159.744-212.992 159.744C167.424 867.498667 55.466667 845.653333 0.170667 825.173333V938.666667c45.909333 16.213333 161.792 36.693333 277.845333 36.693333z m623.786667 0c27.818667 0 48.298667-2.901333 73.557333-7.168v-105.642666c-22.869333 5.802667-42.154667 8.533333-71.168 8.533333-79.701333 0-94.208-28.842667-94.208-150.186667V289.28h161.792v-104.106667h-161.792V0h-103.765333v185.173333h-96.597334v104.106667h96.597334v438.613333c0 205.312 51.882667 247.466667 195.584 247.466667z m312.832-718.165333H1097.557333v718.165333h117.248v-469.333333c40.96-127.658667 133.802667-158.378667 227.84-158.378667h16.384l4.096-103.594666h-13.653333c-83.456 0-176.469333 21.162667-225.962667 123.392l-8.533333 19.968v-130.218667z m370.346666 718.165333c87.552 0 121.856-15.36 121.856-123.733333 0-104.618667-34.133333-119.978667-121.856-119.978667-89.6 0-122.026667 15.36-122.026666 119.978667 0 108.373333 32.426667 123.733333 122.026666 123.733333z"
        fill=""
      />
    </svg>
    <svg
      v-else-if="type === 'int'"
      class="svg-icon"
      viewBox="0 0 1706 1024"
      aria-hidden="true"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path
        d="M178.176 961.194667V193.365333h8.192l378.538667 768h245.76V2.730667H633.856v722.261333h-8.192L277.504 2.901333H0v958.293334h178.176z m1173.162667-237.909334c227.84 0 328.533333-102.912 328.533333-365.056C1679.872 96.085333 1579.178667 0 1351.338667 0c-226.474667 0-336.213333 83.797333-336.213334 358.229333s109.738667 365.056 336.213334 365.056z m-339.626667 82.432H1706.666667v154.112H1011.712V805.546667zM1350.656 610.986667c-133.973333 0-179.541333-59.392-179.541333-252.757334S1213.781333 104.106667 1350.656 104.106667c136.704 0 180.906667 60.757333 180.906667 254.122666s-42.666667 252.586667-180.906667 252.586667z"
        fill=""
      />
    </svg>
    <svg
      v-else-if="type === 'float'"
      class="svg-icon"
      viewBox="0 0 1706 1024"
      aria-hidden="true"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path
        d="M178.176 961.194667V193.365333h8.192l378.538667 768h245.76V2.730667H633.856v722.261333h-8.192L277.504 2.901333H0v958.293334h178.176z m1173.162667-237.909334c227.84 0 328.533333-102.912 328.533333-365.056C1679.872 96.085333 1579.178667 0 1351.338667 0c-226.474667 0-336.213333 83.797333-336.213334 358.229333s109.738667 365.056 336.213334 365.056z m-339.626667 82.432H1706.666667v154.112H1011.712V805.546667zM1350.656 610.986667c-133.973333 0-179.541333-59.392-179.541333-252.757334S1213.781333 104.106667 1350.656 104.106667c136.704 0 180.906667 60.757333 180.906667 254.122666s-42.666667 252.586667-180.906667 252.586667z"
        fill=""
      />
    </svg>
    <svg
      v-else-if="type === 'date'"
      class="svg-icon"
      viewBox="0 0 1024 1024"
      aria-hidden="true"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path
        d="M475.39566 585.157484h73.10629c20.477952 0 36.553145-16.075192 36.553144-36.553144 0-20.477952-16.075192-36.553145-36.553144-36.553145h-73.10629c-20.477952 0-36.553145 16.075192-36.553144 36.553145 0 20.477952 16.075192 36.553145 36.553144 36.553144z m0 146.314969h73.10629c20.477952 0 36.553145-16.075192 36.553144-36.553145 0-20.477952-16.075192-36.553145-36.553144-36.553145h-73.10629c-20.477952 0-36.553145 16.075192-36.553144 36.553145 0 20.477952 16.075192 36.553145 36.553144 36.553145zM877.480252 73.208679H731.370063V36.655534c0-20.477952-16.075192-36.553145-36.553145-36.553144-20.477952 0-36.553145 16.075192-36.553144 36.553144v36.553145H365.531447V36.655534c0-20.477952-16.075192-36.553145-36.553145-36.553144-20.477952 0-36.553145 16.075192-36.553145 36.553144v36.553145H146.417358C65.836616 73.208679 0 139.045295 0 219.523648v585.055094c0 80.478352 65.836616 146.314969 146.314969 146.314969H877.480252c80.478352 0 146.314969-65.836616 146.314968-146.314969V219.523648C1023.89761 139.045295 958.060994 73.208679 877.582642 73.208679z m73.208679 731.370063a73.311069 73.311069 0 0 1-73.208679 73.106289H146.417358a73.311069 73.311069 0 0 1-73.208679-73.106289V365.736226h877.685032v438.842516z m0-511.948805H73.106289v-73.106289c0-40.239176 32.969503-73.106289 73.20868-73.10629h146.212578v36.553145c0 20.477952 16.075192 36.553145 36.553145 36.553145 20.477952 0 36.553145-16.075192 36.553145-36.553145v-36.553145H658.366163v36.553145c0 20.477952 16.075192 36.553145 36.553145 36.553145 20.477952 0 36.553145-16.075192 36.553145-36.553145v-36.553145H877.480252c40.239176 0 73.208679 32.867113 73.208679 73.10629v73.106289zM255.974403 731.472453h73.106289c20.477952 0 36.553145-16.075192 36.553145-36.553145 0-20.477952-16.075192-36.553145-36.553145-36.553145H255.974403c-20.477952 0-36.553145 16.075192-36.553145 36.553145 0 20.477952 16.075192 36.553145 36.553145 36.553145z m438.842515-146.314969H767.923208c20.477952 0 36.553145-16.075192 36.553144-36.553144C804.476352 528.126387 788.40116 512.051195 767.923208 512.051195h-73.10629c-20.477952 0-36.553145 16.075192-36.553144 36.553145 0 20.477952 16.075192 36.553145 36.553144 36.553144z m-438.842515 0h73.106289c20.477952 0 36.553145-16.075192 36.553145-36.553144 0-20.477952-16.075192-36.553145-36.553145-36.553145H255.974403c-20.477952 0-36.553145 16.075192-36.553145 36.553145 0 20.477952 16.075192 36.553145 36.553145 36.553144z m438.842515 146.314969H767.923208c20.477952 0 36.553145-16.075192 36.553144-36.553145 0-20.477952-16.075192-36.553145-36.553144-36.553145h-73.10629c-20.477952 0-36.553145 16.075192-36.553144 36.553145 0 20.477952 16.075192 36.553145 36.553144 36.553145z"
        fill=""
      />
    </svg>
    <svg
      v-else-if="type === 'YEAR'"
      class="svg-icon"
      viewBox="0 0 1024 1024"
      aria-hidden="true"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path
        d="M1024 73.130667H731.392V0h-73.130667v73.130667H365.738667V0h-73.130667v73.130667H0V1024h1024V73.130667zM950.869333 938.666667H73.130667V160.085333H292.693333v70.741334h73.130667v-70.826667h292.522667v70.826667h73.130666v-70.826667h219.477334V938.666667zM571.136 848.725333V643.584L768 336.725333H634.88L515.157333 541.013333h-4.608L394.496 336.725333H256l196.096 309.077334v202.922666z"
      />
    </svg>
    <svg
      v-else-if="type === 'QUARTER'"
      class="svg-icon"
      viewBox="0 0 1024 1024"
      aria-hidden="true"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path
        d="M510.72 307.456c35.242667 0 67.669333 5.376 97.109333 16.213333 29.696 10.922667 55.125333 26.709333 76.288 47.274667 20.992 20.48 37.12 45.226667 48.469334 74.154667 6.826667 17.237333 11.434667 35.669333 14.165333 55.466666l2.048 20.224 0.597333 20.565334v22.954666l-0.682666 20.992a239.274667 239.274667 0 0 1-24.746667 94.72 204.8 204.8 0 0 1-44.117333 58.026667l-7.594667 6.4 78.250667 53.418667 0.426666 13.226666-74.154666 57.429334-12.202667 0.256-102.656-75.946667-15.701333 2.389333a307.2 307.2 0 0 1-34.816 1.877334c-34.56 0-66.56-5.461333-95.744-16.213334a208.213333 208.213333 0 0 1-125.44-120.832 234.325333 234.325333 0 0 1-14.421334-55.466666l-2.048-20.224-0.682666-20.565334v-23.04l0.682666-20.138666c1.792-27.477333 7.338667-52.650667 16.554667-75.690667 11.605333-28.842667 27.818667-53.589333 48.810667-73.984a214.186667 214.186667 0 0 1 75.861333-47.274667c29.184-10.837333 61.098667-16.213333 95.744-16.213333z m0 100.096c-16.469333 0-30.976 2.645333-43.605333 8.021333a85.930667 85.930667 0 0 0-32.170667 23.552 114.773333 114.773333 0 0 0-21.76 41.216c-2.56 8.533333-4.693333 17.92-5.973333 27.904l-1.536 15.36-0.512 17.152v22.528l0.512 17.408c1.024 16.128 3.584 30.72 7.68 43.52 5.376 16.896 12.714667 30.72 22.016 41.728 8.96 10.496 19.626667 18.261333 32.256 23.552 12.8 5.461333 27.306667 8.106667 43.776 8.106667 34.218667 0 59.306667-10.24 77.056-31.402667 14.08-16.810667 23.04-40.106667 26.709333-69.888l1.365333-15.36 0.426667-17.152v-22.613333l-0.512-17.493333c-2.133333-37.290667-11.776-65.536-28.416-84.821334-18.090667-21.077333-43.264-31.317333-77.312-31.317333zM1024 73.130667H731.392V0h-73.130667v73.130667H365.738667V0h-73.130667v73.130667H0V1024h1024V73.130667zM950.869333 938.666667H73.130667V160.085333H292.693333v70.741334h73.130667v-70.826667h292.522667v70.826667h73.130666v-70.826667h219.477334V938.666667z"
      />
    </svg>
    <svg
      v-else-if="type === 'MONTH'"
      class="svg-icon"
      viewBox="0 0 1024 1024"
      aria-hidden="true"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path
        d="M347.904 852.906667v-402.773334h4.608l100.266667 306.176h115.456L669.866667 450.133333h4.608v402.773334H788.48v-512H606.208l-91.136 288.426666h-4.608L423.253333 340.906667H235.52v512zM1024 73.130667H731.392V0h-73.130667v73.130667H365.738667V0h-73.130667v73.130667H0V1024h1024V73.130667zM950.869333 938.666667H73.130667V160.085333H292.693333v70.741334h73.130667v-70.826667h292.522667v70.826667h73.130666v-70.826667h219.477334V938.666667z"
      />
    </svg>
    <svg
      v-else-if="type === 'WEEK'"
      class="svg-icon"
      viewBox="0 0 1024 1024"
      aria-hidden="true"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path
        d="M427.52 845.226667L512 502.613333l84.48 342.528H704l115.114667-512H712.618667l-69.802667 364.288-85.162667-364.373333H467.114667L381.44 696.917333 311.466667 333.226667H204.8l115.114667 512zM1024 73.130667H731.392V0h-73.130667v73.130667H365.738667V0h-73.130667v73.130667H0V1024h1024V73.130667zM950.869333 938.666667H73.130667V160.085333H292.693333v70.741334h73.130667v-70.826667h292.522667v70.826667h73.130666v-70.826667h219.477334V938.666667z"
      />
    </svg>
    <svg
      v-else-if="type === 'DAY'"
      class="svg-icon"
      viewBox="0 0 1024 1024"
      aria-hidden="true"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path
        d="M482.56 840.704c181.333333 0 300.373333-58.282667 300.373333-256 0-213.162667-119.04-256-300.373333-256h-211.626667v512h211.626667zM475.477333 744.96h-69.376v-321.706667h69.376c111.104 0 167.936 29.525333 167.936 161.536 0 124.757333-54.186667 160.170667-167.936 160.170667zM1024 73.130667H731.392V0h-73.130667v73.130667H365.738667V0h-73.130667v73.130667H0V1024h1024V73.130667zM950.869333 938.666667H73.130667V160.085333H292.693333v70.741334h73.130667v-70.826667h292.522667v70.826667h73.130666v-70.826667h219.477334V938.666667z"
      />
    </svg>
    <svg
      v-else-if="type === 'HOUR'"
      class="svg-icon"
      viewBox="0 0 1024 1024"
      aria-hidden="true"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path
        d="M391.360853 795.306667V568.746667h243.2V795.306667H768.534187v-512H634.560853v191.744H391.360853V283.306667H256.534187v512zM509.03552 921.6a51.2 51.2 0 1 1 0 102.4 51.2 51.2 0 0 1 0-102.4zM512.534187 0a512.170667 512.170667 0 0 1 501.930666 410.453333h-87.466666A426.837333 426.837333 0 0 0 85.86752 512a426.837333 426.837333 0 0 0 325.12 414.464v87.466667A512 512 0 0 1 512.534187 0z m256.341333 848.469333a51.2 51.2 0 1 1 0 102.4 51.2 51.2 0 0 1 0-102.4z m147.285333-162.048a51.2 51.2 0 1 1 0 102.4 51.2 51.2 0 0 1 0-102.4zM973.334187 460.8a51.2 51.2 0 1 1 0 102.4 51.2 51.2 0 0 1 0-102.4z"
      />
    </svg>
    <svg
      v-else-if="type === 'MINUTE'"
      class="svg-icon"
      viewBox="0 0 1024 1024"
      aria-hidden="true"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path
        d="M348.438187 796.330667v-402.773334h4.608l100.266666 306.090667h115.456L670.400853 393.472h4.608v402.773333H789.014187v-512H606.742187L515.606187 572.842667h-4.608L423.78752 284.330667H236.054187v512zM509.03552 921.6a51.2 51.2 0 1 1 0 102.4 51.2 51.2 0 0 1 0-102.4zM512.534187 0a512.170667 512.170667 0 0 1 501.930666 410.453333h-87.466666A426.837333 426.837333 0 0 0 85.86752 512a426.837333 426.837333 0 0 0 325.12 414.464v87.466667A512 512 0 0 1 512.534187 0z m256.341333 848.469333a51.2 51.2 0 1 1 0 102.4 51.2 51.2 0 0 1 0-102.4z m147.285333-162.048a51.2 51.2 0 1 1 0 102.4 51.2 51.2 0 0 1 0-102.4zM973.334187 460.8a51.2 51.2 0 1 1 0 102.4 51.2 51.2 0 0 1 0-102.4z"
      />
    </svg>
    <svg
      v-else-if="type === 'SECOND'"
      class="svg-icon"
      viewBox="0 0 1024 1024"
      aria-hidden="true"
      width="1em"
      height="1em"
      fill="currentColor"
    >
      <path
        d="M523.62752 785.066667c28.928 0 55.210667-3.413333 78.762667-10.069334 23.466667-6.656 43.605333-16.213333 60.245333-28.842666 16.64-12.458667 29.525333-27.904 38.570667-46.08 9.045333-18.346667 13.653333-39.168 13.653333-62.464 0-21.930667-3.754667-41.557333-11.264-58.88a141.994667 141.994667 0 0 0-33.194667-46.677334 225.450667 225.450667 0 0 0-54.613333-37.205333 510.805333 510.805333 0 0 0-75.946667-29.866667c-34.218667-10.24-60.245333-21.333333-77.994666-33.109333-17.749333-11.776-26.624-26.453333-26.624-44.032a55.210667 55.210667 0 0 1 20.821333-43.776 75.264 75.264 0 0 1 26.026667-13.141333c10.581333-3.157333 22.954667-4.778667 37.205333-4.778667 14.677333 0 27.477333 1.962667 38.4 5.717333a74.837333 74.837333 0 0 1 27.136 15.872c7.253333 6.826667 12.629333 14.933333 16.128 24.405334 3.413333 9.557333 5.205333 19.882667 5.205333 31.061333H714.774187a150.954667 150.954667 0 0 0-52.906667-117.930667 182.613333 182.613333 0 0 0-61.184-34.133333A245.674667 245.674667 0 0 0 521.06752 238.933333c-28.501333 0-54.613333 3.584-78.506667 10.752-23.722667 7.168-44.202667 17.237333-61.44 30.122667-17.322667 12.885333-30.72 28.586667-40.277333 46.933333a129.962667 129.962667 0 0 0-14.250667 60.757334c0 23.125333 4.608 43.349333 13.909334 60.586666a153.6 153.6 0 0 0 38.058666 45.824c16.042667 13.312 34.730667 24.746667 56.149334 34.56 21.333333 9.728 44.117333 18.432 68.266666 26.282667 21.248 6.826667 38.570667 13.226667 51.968 19.285333 13.397333 6.144 23.893333 12.288 31.488 18.602667 7.594667 6.4 12.8 13.226667 15.36 20.650667a73.898667 73.898667 0 0 1 4.010667 25.002666c0 8.533333-1.706667 16.469333-4.864 23.893334a49.834667 49.834667 0 0 1-15.104 19.2 74.922667 74.922667 0 0 1-25.6 12.629333 130.730667 130.730667 0 0 1-36.693333 4.522667c-15.616 0-29.866667-1.536-42.666667-4.778667a87.893333 87.893333 0 0 1-32.768-15.104 69.802667 69.802667 0 0 1-21.248-27.221333c-5.12-11.178667-7.594667-24.746667-7.594667-40.874667H310.294187c0 19.968 2.816 38.144 8.533333 54.613333 5.632 16.384 13.482667 31.061333 23.466667 43.946667 10.069333 12.885333 21.845333 24.149333 35.328 33.621333 13.482667 9.472 28.16 17.408 44.032 23.722667 15.786667 6.314667 32.426667 11.008 49.749333 14.08 17.408 2.986667 34.816 4.522667 52.138667 4.522667zM509.03552 921.6a51.2 51.2 0 1 1 0 102.4 51.2 51.2 0 0 1 0-102.4zM512.534187 0a512.170667 512.170667 0 0 1 501.930666 410.453333h-87.466666A426.837333 426.837333 0 0 0 85.86752 512a426.837333 426.837333 0 0 0 325.12 414.464v87.466667A512 512 0 0 1 512.534187 0z m256.341333 848.469333a51.2 51.2 0 1 1 0 102.4 51.2 51.2 0 0 1 0-102.4z m147.285333-162.048a51.2 51.2 0 1 1 0 102.4 51.2 51.2 0 0 1 0-102.4zM973.334187 460.8a51.2 51.2 0 1 1 0 102.4 51.2 51.2 0 0 1 0-102.4z"
      />
    </svg>
  </i>
</template>

<script>
export default {
  name: "field-type-icon",
  props: {
    type: {
      type: String,
      default: "string",
      validator: (val) =>
        [
          "string",
          "int",
          "float",
          "DATE",
          "YEAR",
          "QUARTER",
          "MONTH",
          "WEEK",
          "DAY",
          "HOUR",
          "MINUTE",
          "SECOND"
        ].includes(val)
    },
    size: {
      type: String,
      default: "12px"
    }
  }
}
</script>

<style lang="less" scoped>
.svg-icon-wrapper {
  display: inline-block;
  position: relative;

  > svg {
    display: inline-block;
    vertical-align: top;
  }
}
</style>
